<template>
	<view class="search">
		<view class="search-box">
			<image src="../../static/icos/search.png" class="search-icon"></image>
			<input 
			type="text" 
			placeholder="找预告" 
			class="search-input"
			confirm-type="search"
			v-model="key"
			 @confirm="getSearch(true)"/>
		</view>
		<view class="search-content">
			<image v-for="item in movie" :src="item.poster_url" mode="" class="search-cover" @click="goMovieInfo(item.id)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key:"",
				page:1,
				movie:[],
				allPage:null,
				movieNum:12
			}
		},
		methods: {
			goMovieInfo(id){
				uni.navigateTo({
					url:"../movieInfo/movieInfo?id="+id,
				})
			},
			getSearch(search){
				uni.showLoading({
					mask:true
				})
				uni.request({
					url:this.root+'/api/getSearch?key='+this.key+'&page='+this.page+'&movieNum='+this.movieNum,
					success:(res)=> {
						if(search){
							if(res.data.err==0){
								this.page=1
								this.movie=res.data.data
								this.allPage=res.data.allPage
							}
						}else{
							if(res.data.err==0){
								this.movie=this.movie.concat(res.data.data)
								this.allPage=res.data.allPage
							}
						}
						
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			
			
		},
		onLoad() {
			this.getSearch()
		},
		onReachBottom(){
			this.page++
			if(this.allPage<this.page){
				this.getSearch()
			}

		}
	}
</script>

<style>
@import url("search.css");
</style>
